<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>常州旷达威德机械有限公司--坡口选择demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<link href="/css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<style type="text/css">
body{margin:8px;text-align:left;}

.groove{position:absolute;width:380px;padding:4px;background-color:#fff;border:1px solid #aaa;}
.groove .tabs{height:24px;background:url(/images/func_tab_lined3.gif) repeat-x left bottom;}
.groove .tabs li{float:left;height:16px;margin-left:4px;padding:3px 8px;background-color:#fff;border:1px solid #d3d3d3;border-width:1px 1px 0;cursor:pointer;}
.groove .tabs .current{height:17px;background-color:#f3f3f3;color:#c00;}
.groove .container{display:none;background-color:#f3f3f3;border:1px solid #d3d3d3;border-width:0 1px 1px;}
.groove .valid{display:table;}
.groove .container td{background-color:#fff;border:1px solid #eee;text-align:center;cursor:pointer;}
.groove .container .selected{border:1px solid #f3858d;}
.groove .container .empty{background-color:transparent;border:0;cursor:auto;}
</style>
</head>
<body>
<!--
demo 使用说明：
只有class="groove"的div及其内容是有用的部分，其他均为样式展示的辅助代码。
应用时请直接拷贝至相应区域，如：td内。
-->
<h1 style="font-size:24px;font-weight:bold;color:#c00;text-align:left;border-bottom:1px solid #c00;">坡口选择：</h1>
<br />
坡口图: 
<div id="pkBox"><img id="pkImg" name="pkImg" src="" width="160" width="150" border="0" /></div>
坡口图Val: <input id="pkVal" name="pkVal" type="text" value="" />

<table id="main" class="main" width="100%" height="500" cellspacing="1" cellpadding="0">
  <tr>
    <td id="content" class="content" valign="top">
      <span style="position:relative;">
      <input id="pkPos" name="pkPos" type="button" value="修改坡口" />
      <div id="groove" class="groove" style="left:1px;top:20px;display:none;">
        <ol id="grooveTab" class="tabs">
          <li id="inx0" class="current">外坡口</li>
          <li id="inx1">内坡口</li>
          <li id="inx2">X型坡口</li>
          <li id="inx3">平坡口</li>
          <li id="inx4">SH坡口</li>
          <li id="inx5">特殊坡口</li>
        </ol>
        <table id="container0" class="container valid" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td id="out_0_a" width="50%" class="selected"><img src="/images/groove/s11.gif" width="112" height="104" border="0" /></td>
            <td id="out_0_b" width="50%"><img src="/images/groove/s12.gif" width="112" height="104" border="0" /></td>
          </tr>
          <tr>
            <td id="out_0_c"><img src="/images/groove/s13.gif" width="112" height="104" border="0" /></td>
            <td id="out_0_d"><img src="/images/groove/s14.gif" width="112" height="104" border="0" /></td>
          </tr>
        </table>
        <table id="container1" class="container" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td id="in_1_a" width="50%"><img src="/images/groove/s21.gif" width="112" height="104" border="0" /></td>
            <td id="in_1_b" width="50%"><img src="/images/groove/s22.gif" width="112" height="104" border="0" /></td>
          </tr>
          <tr>
            <td id="in_1_c"><img src="/images/groove/s23.gif" width="112" height="104" border="0" /></td>
            <td id="in_1_d"><img src="/images/groove/s24.gif" width="112" height="104" border="0" /></td>
          </tr>
        </table>
        <table id="container2" class="container" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td id="x_2_a" width="50%"><img src="/images/groove/s31.gif" width="112" height="104" border="0" /></td>
            <td id="x_2_b" width="50%"><img src="/images/groove/s32.gif" width="112" height="104" border="0" /></td>
          </tr>
          <tr>
            <td id="x_2_c"><img src="/images/groove/s33.gif" width="112" height="104" border="0" /></td>
            <td id="x_2_d"><img src="/images/groove/s34.gif" width="112" height="104" border="0" /></td>
          </tr>
        </table>
        <table id="container3" class="container" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td id="ping_3_a" width="50%"><img src="/images/groove/s44.gif" width="112" height="104" border="0" /></td>
            <td id="ping_3_b" width="50%"><img src="/images/groove/s45.gif" width="112" height="104" border="0" /></td>
          </tr>
          <tr>
            <td id="ping_3_c"><img src="/images/groove/s46.gif" width="112" height="104" border="0" /></td>
            <td class="empty">&nbsp;</td>
          </tr>
        </table>
        <table id="container4" class="container" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td id="s_4_a" width="50%"><img src="/images/groove/s41.gif" width="112" height="104" border="0" /></td>
            <td id="s_4_b" width="50%"><img src="/images/groove/s42.gif" width="112" height="104" border="0" /></td>
          </tr>
          <tr>
            <td id="s_4_c"><img src="/images/groove/s43.gif" width="112" height="104" border="0" /></td>
            <td class="empty">&nbsp;</td>
          </tr>
        </table>
        <table id="container5" class="container" width="100%" cellspacing="12" cellpadding="0">
          <tr>
            <td class="empty" width="50%">&nbsp;</td>
            <td class="empty" width="50%">&nbsp;</td>
          </tr>
          <tr>
            <td class="empty">&nbsp;</td>
            <td class="empty">&nbsp;</td>
          </tr>
        </table>
      </div>
      </span>
    </td>
  </tr>
</table>

<script type="text/javascript">
  applyTrans($('#grooveTab').find('li'), 'current', function(){
    $('#groove').find('table.container')
    .removeClass('valid')
    .eq($(this).attr('id').replace(/[^\d]/g, ''))
    .addClass('valid');
	});
  applyTrans($('#groove').find('table.container').find('td:not(.empty)'), 'selected', function(){
    var data = this.id.split('_'),
        id   = data[1],
        type = data[2];
    $('#pkBox').load('/wd/craftCard/groove.htm?id='+id+'&type='+type);
    $('#groove').hide();
  });
  $('#pkPos').click(function(eve){
    var groove = $('#groove');
    if(groove.filter(':visible').length > 0)
      groove.hide();
    else
    	groove.show();
	});
</script>
</body>
</html>